<template>
  <div class="spl-container emp-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-left-tree">
      <div class="filter-area m-form">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
      </div>
      <el-tree
        class="filter-tree"
        highlight-current
        :data="orgTreeData"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        ref="orgTree">
          <span slot-scope="{ node, data }" :class="data.icon!=null?'mt--10':''">
            <i :class="data.icon==null?'el-icon-office-building':data.icon"></i>
            <span style="padding-left: 4px;">{{node.label}}</span>
          </span>
      </el-tree>
    </div>
    <div class="emp-right-tb">
      <div class="search-row m-form">
        <!--<label class="label-text">在职状态:</label>-->
        <!--<el-select placeholder="请选择" class="label-sel" v-model="search.type">-->
        <!--<el-option label="label1" value="1"></el-option>-->
        <!--<el-option label="label2" value="2"></el-option>-->
        <!--</el-select>-->

        <el-input placeholder="搜索姓名/证照号码" class="ml-20 w-220" v-model="searchWord"></el-input>
        <el-button type="primary" class="search-btn" icon="el-icon-search" @click="getTableData"></el-button>

        <div class="search-row-btn">
          <!--<router-link to="/employeeAdd">-->
            <!--<el-button type="primary" class="opt-btn green-btn" icon="el-icon-circle-plus-outline">添加员工</el-button>-->
          <!--</router-link>-->
          <el-dropdown split-button type="primary" class="opt-btn opt-button">
            <i class="icon ic-import"></i><span>导入</span>
            <el-dropdown-menu slot="dropdown">
              <router-link v-for="(item,index) in moduleList" :key="index"
                           :to="'/employeeImport?moduleCode='+ item.moduleCode + '&subModuleCode=' + item.subModuleCode">
                <el-dropdown-item v-text="'导入'+item.name"></el-dropdown-item>
              </router-link>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown split-button type="warning" class="opt-button yellow-btnicon" @command="exprtData">
            <i class="icon ic-export"></i><span>导出</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in moduleList" v-text="'导出'+item.name" :command="item"></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!--<el-button type="primary" class="opt-btn yellow-btn" icon="icon ic-export" @click="exprtData">导出</el-button>-->
        </div>
      </div>
      <dTable @fetch="getTableData" ref="empTable" :tableHeight="tableHeight">
        <el-table-column type="selection" fixed="left" align="center" width="55"></el-table-column>
        <el-table-column prop="name" label="员工姓名" width="150" header-align="center" align="left">
          <template slot-scope="scope">
            <p>{{ scope.row.name }}
              <i :class="scope.row.sex==1?'el-icon-male text-blue':'el-icon-female text-red'"></i>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="certificateNumber" label="证照号码" width="120" header-align="center" align="left"></el-table-column>
        <el-table-column prop="deptName" label="部门" width="120" header-align="center" align="left"></el-table-column>
        <el-table-column prop="presidentName" label="职位" width="120" header-align="center" align="left"></el-table-column>
        <el-table-column prop="code" label="工号" width="300" header-align="center" align="left"></el-table-column>
        <el-table-column prop="residenceType" label="户口性质" header-align="center" align="left"></el-table-column>
        <el-table-column prop="nativePlace" label="户籍" header-align="center" align="left"></el-table-column>
        <el-table-column prop="workStatus" label="在职状态" header-align="center" align="left">
          <template slot-scope="scope">
            <p v-text="scope.row.workStatusMeaning" :class="scope.row.workStatus==2?'text-red':'text-blue'"></p>
          </template>
        </el-table-column>
        <el-table-column prop="entryDate" label="入职时间" :formatter="formatDateFun" header-align="center" align="center"></el-table-column>
        <el-table-column prop="leaveDate" label="离职时间" :formatter="formatDateFun" header-align="center" align="center"></el-table-column>
        <!--<el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="delEmp(scope.row)">
              移除
            </el-button>
          </template>
        </el-table-column>-->
      </dTable>

    </div>
  </div>
</template>
<script>
  import dTable from '../../components/common/table'

  export default {
    components: {dTable},
    data () {
      return {
        // 导航
        pathData: [
          { name: '员工信息' },
          { name: '员工列表', path: '/employeeList' }
        ],
        orgId: '',
        searchWord: '',
        filterText: '',
        orgTreeData: [],
        defaultProps: {
          children: 'subOrginization',
          label: 'name'
        },
        // moduleCode模块编号（个人基本信息：employee_info,教育经历 edu_info 工作经历 worked_info 在职信息 work_info 账户信息 account_info 合同信息 contact_info 资料信息 attach_info） ,
        //subModuleCode子模块编号 附件信息 attachment_info 证照信息 license_info 银行信息 bank_info 福利信息 welfare_info ,
        moduleList: [
          {name: '基础信息', moduleCode: 'employee_info', subModuleCode: ''},
         /* {name: '教育经历', moduleCode: 'edu_info', subModuleCode: ''},
          {name: '工作经历', moduleCode: 'worked_info', subModuleCode: ''},*/
          {name: '在职信息', moduleCode: 'work_info', subModuleCode: ''},
          {name: '账户信息-银行卡信息', moduleCode: 'account_info', subModuleCode: 'bank_info'},
          {name: '账户信息-福利信息', moduleCode: 'account_info', subModuleCode: 'welfare_info'},
          {name: '合同信息', moduleCode: 'contact_info', subModuleCode: ''}/*,
          {name: '资料信息-附件资料', moduleCode: 'attach_info', subModuleCode: 'attachment_info'},
          {name: '资料信息-员工证照', moduleCode: 'attach_info', subModuleCode: 'license_info'}*/
        ]
      }
    },
    created () {
      this.getOrgTreeData()
      this.$nextTick(() => {
        this.getTableData()
      })
    },
    computed: {
      tableHeight: function () {
        return this.$global.bodyHeight - 200 + 'px'
      }
    },
    watch: {
      filterText (val) {
        this.$refs.orgTree.filter(val)
      }
    },
    methods: {
      // 获取组织架构树数据
      getOrgTreeData (moduleCode) {
        this.$http({
          url: '/company/organization/tree',
          method: 'get',
          param: {}
        }).then(({data}) => {
          if (data.code === 0) {
            var all = [{id: '',name:'所有部门',icon: 'el-icon-s-home'}]
            var allOrg = all.concat(data.data.subOrginization)
            this.orgTreeData = allOrg
          }
        })
      },
      formatDateFun(row, column, cellValue, index){
        return cellValue == null ? '-' : this.$global.dateToStr(cellValue)
      },
      getTableData (params = []) {
        params = [{property: "deptId", value: this.orgId}, {property: "selectMsg", value: this.searchWord}]
        // test用
        // this.$refs.empTable.fetch(params, '/employeecumulativededuct/page')
        this.$refs.empTable.fetch(params, 'post', '/employeeInfo/page')
      },
      //移除
      delEmp(row){
      },
      exprtData(item){
          this.$downloadFile('/employeeInfo/export', 'post', {moduleCode:item.moduleCode,subModuleCode:item.subModuleCode},this.$global.EXCEL)
      },
      nodeClick (data, node, ele) {
        this.orgId = data.id
        this.getTableData()
      },
      filterNode (value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      }
    }
  }
</script>
<style lang="less" scoped>
  .emp-container {
    position: relative;
    height: 100%;
  }

  .emp-left-tree {
    width: 300px;
    min-width: 300px;
    height: 100%;
    border-right: 1px solid #E5E5E5;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
  }

  .emp-right-tb {
    width: 100%;
    height: 100%;
    padding: 15px 10px;
    padding-left: 310px;
    box-sizing: border-box;
    float: right;
  }

  .filter-area {
    padding: 15px;
  }

  .search-row {
    .label-text {
      width: 100px;
    }
  }
  .mt--10 {
    margin-left: -10px;
  }
</style>
